<!-- 小组页面 -->
<template>
  <div class="talk-container">
    <el-col :span="18" :offset="3" class="tag">
      
     <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="热门话题" name="first"><hot-talk></hot-talk></el-tab-pane>
    <el-tab-pane label="最新话题" name="second"><new-talk></new-talk></el-tab-pane>
        <el-tab-pane label="我的话题" name="third"><my-talk></my-talk></el-tab-pane>
        <el-tab-pane label="创建话题" name="four"><create-talk></create-talk></el-tab-pane>
  </el-tabs>
    </el-col>

  </div>
 
</template>

<script>
import HotTalk from './hotTalk.vue'
import NewTalk from './newTalk.vue'
import MyTalk from './myTalk.vue'
import CreateTalk from './create.vue'
export default {
  data () {
    return {
       activeName: 'first'
    };
  },
  components:{
    HotTalk,
    NewTalk,
    MyTalk,
    CreateTalk
  },

  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
      }
  }
}

</script>
<style lang='scss' scoped>
.talk-container{
  .tag{
    margin-top:50px;
  }
}
</style>